<template>
  <div class="qianbao">
    <div class="t">
      <div class="t1"></div>
      <van-nav-bar
        title="咖啡钱包"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="m">
      <div class="g">
        <div class="B"><span>B1</span>全国通用</div>
        <div class="er">￥<span>21</span></div>
        <div class="shang">尚余1杯</div>
      </div>
      <div class="g">
        <div class="B"><span>B2</span>全国通用</div>
        <div class="er">￥<span>21</span></div>
        <div class="shang">尚余1杯</div>
      </div>
      <div class="g">
        <div class="B"><span>B3</span>全国通用</div>
        <div class="er">￥<span>21</span></div>
        <div class="shang">尚余1杯</div>
      </div>
      <div class="g">
        <div class="B"><span>B4</span>全国通用</div>
        <div class="er">￥<span>21</span></div>
        <div class="shang">尚余1杯</div>
      </div>
      <div class="g">
        <div class="B"><span>B5</span>全国通用</div>
        <div class="er">￥<span>21</span></div>
        <div class="shang">尚余1杯</div>
      </div>
      <div class="g">
        <div class="B"><span>B6</span>全国通用</div>
        <div class="er">￥<span>21</span></div>
        <div class="shang">尚余1杯</div>
      </div>
    </div>
    <div class="b">
      <van-grid :column-num="3">
        <van-grid-item class="tu1" @click="chongZhe">
          <van-icon name="coupon-o" class="c"/>
          <span>充值优惠</span>
        </van-grid-item>

        <van-grid-item  class="tu1"  @click="chongZhe1">
          <van-icon name="coupon-o" class="c"/>
          <span>我要请客</span>
        </van-grid-item>

        <van-grid-item class="tu1"  @click="chongZhe2">
          <van-icon name="coupon-o" class="c"/>
          <span>发送红包</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.push({name:'Me'});
    },
    chongZhe(){
       this.$router.push({name:'ChongZeng'});
    },
    chongZhe1(){
       this.$router.push({name:'QingKe'});
    },
    chongZhe2(){
       this.$router.push({name:'HongBao'});
    }
  }
}
</script>

<style scoped>
.qianbao{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.t{
  height: 64px;
}
.t1{
  height: 20px;
}
.t2{
  height: 44px;
}
.m{
  flex:1;
  background: ghostwhite;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-around;
}
.b{
  height: 60px;
  background: orange;
}
.tu1{
  height: 60px;
}
.c{
  font-size: 25px;
}
.tu1 span{
  font-size: 14px;
}
.g{
  width: 152px;
  height: 93px;
  background: url("http://www.sunlulu.club/img/qgty.png");
  background-size: 100%;
  padding: 5px;
  margin: 5px 0;
}
.g .B span{
  font-weight: 400;
  font-size: 25px;
}
.g .er{
  margin-top: 9px
}
.g .er span{
  font-size: 22px;
}
.g .shang{
  font-size: 13px;
  margin-top:3px;
}
</style>
